/* reset */
*,*::before,*::after{box-sizing:border-box}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role="list"],ol[role="list"]{list-style:none}html:focus-within{/*scroll-behavior:smooth*/}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}a:not([class]){text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media(prefers-reduced-motion:reduce){html:focus-within{/*scroll-behavior:auto*/}*,*::before,*::after{/*animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important*/}}

:root{
	--bgColor: #111;
	--wrapColor: #fff;
	--loadColor: #BCBCBC;
	--naviColor: #EEE;
	--naviTextColor: #000;
}

body::backdrop {
  background-color: var(--bgColor);
}

html{
	/* overflow-x: hidden;
	overflow-y: scroll;
	-ms-overflow-style: none;
	scrollbar-width: none; */
}

body{
	font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Helvetica Neue",Helvetica,Arial,メイリオ,"Meiryo UI",sans-serif;
	width: 100%;
	height: 100%;
	font-size:14px;
	background-color: var(--bgColor);
	overflow-x: hidden;
	overflow-y: scroll;
	-ms-overflow-style: none;
	scrollbar-width: none;
	user-select: none;
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-khtml-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
}

/* html::-webkit-scrollbar {
	display:none;
} */

.pageWrap{
	/* display: flex; */
	/* justify-content: center; */
	/* align-items: center; */
}

#menuWrap{
		z-index: 20;
		display:block;
		-webkit-user-scalable: no;
}

#mainMenu{
		position: fixed;
		width:100vw;
		z-index: 20;
		color: white;
		display:flex;
		padding: 16px 8px 48px 8px;
		/* padding: 12px 16px; */
		/* background: linear-gradient(rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.15) 60%, rgba(0,0,0,0.05) 80%,rgba(0,0,0,0) 100%); */
		background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
		justify-content: space-between;
		align-items:center;
		transition: 0.3s;
		top: -200px;
}

#mainMenu.active{
	top:0;
}

#mainMenu div{
	height: 24px;
}

#footerMenu span{
	width:100%;
}

#headerRight div{
	padding: 0 8px;
}

#headerLeft{
	display: flex;
	align-items: center;
	justify-content: center;
}

#headerLeft div{
	padding: 0 8px;
}

#subMenu{
	
	display: flex;
	position: fixed;
	justify-content: center;
	align-items: center;
	z-index: 19;
	width: 36px;
	height:100%;
	color: white;
	padding-bottom:4px;
	transition: 0.3s;
	right:-100px;
}

#subMenu.active{
	right:0;
}

#footerMenu{
	position: fixed;
	display: flex;
	flex-direction: column;
	z-index: 20;
	width:100vw;
	align-items: center;
	/* background-color: rgba(0,0,0,0.8); */
	/* background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.7)); */
	color: white;
	/* border-radius: 2vw 2vw 0 0; */
	transition: 0.3s;
	bottom: -300px;
	padding-top: 16px;
	/* background: linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.05) 20%, rgba(0,0,0,0.15) 40%,rgba(0,0,0,0.6) 100%); */
	background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
	/* padding-bottom: 20px; */
}

#footerMenu.active{
	bottom: -2px;
}

.subMenuList{
	width: 100%;
	display: flex;
	/* align-items: center; */
	justify-content: center;
}

.subMenuList:last-child{
	margin-top: 12px;
	margin-bottom: 12px;
}

.subMenuListFlex{
	width: 45%;
	display: flex;
	/* align-items: center; */
	flex-direction: row;
}

.subMenuListLeft{
	justify-content: left;
}
.subMenuListRight{
	justify-content: right;
}

.subMenuListIcon{
	margin: 0 12px;
}

#navPageNum{
	position: fixed;
	z-index: 20;
	bottom: 50px;
	left:50%;
	transform: translateX(-50%);
	background-color: rgba(0,0,0,0.8);
	padding:6px 10px;
	border-radius:10px;
	color:white;
	opacity: 0;
	transition: 0.3s;
}

#navPageNum.active{
	opacity: 1;
}

#navFloatIcon{
	z-index:20;
	position: fixed;
	display: block;
	bottom: 10px;
	transition: 0.3s;
	right: -100px;
	bottom: 10px;
}

#navFloatIcon.active{
	right:58px;
}

#zoomIconWrap{
	display:none;
	align-items: center;
	justify-content: center;
}

#zoomIconWrap *{
	/* line-height: 100%;
	padding: 4px;
	border-radius: 4px; */
}

#mokujiText{
	display:flex;
	align-items:center;
}

li{
	list-style:none;
}

#mokuji_block{
	display:flex;
}

#tapIconArea{
	display:block;
	position:absolute;
}

#navJumpOldViewer{
	display:block;
	position: fixed;
	z-index:1000;
	bottom: 20px;
	left: 5px;
	color:white;
	background-color: rgba(0,0,0,0.8);
	padding: 6px 10px;
	border-radius: 14px;
	font-size: 10px;
	text-decoration:none;
	transition: 0.3s;
}

#navJumpOldViewer:hover{
	background-color: rgba(80,80,80,0.8);
}

.loadingBox {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: var(--wrapColor);
		z-index: 8;
		position: absolute;
		will-change: opacity;
}

@media print {
	#viewWrap,#menuWrap,.loadingBox,.curtain{
		display: none;
	}
	#printer {
		display: block;
	}
}

#mokujiWrap{
	display: none;
	position: fixed;
	z-index:25;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(20px);
	font-size: smaller;
	color: #fff;
	border-radius: 10px;
	width: 80vw;
	max-width: 400px;
	color: #fff;
	line-height: 40px;
	/* height:320px; */
	height: 60vh;
	padding: 10px 30px;
}

#mokujiMain{
	color: white;
	display:block;
	position:relative;
	/* top: -60vh; */
	overflow-y: scroll;

	height: calc(100% - 48px);

	 /* IE, Edge 対応 */
	 -ms-overflow-style: none;
	 /* Firefox 対応 */
	 scrollbar-width: none;
	 border-radius: 10px;
/* pointer-events:auto;*/
	/* background-color: rgba(0,0,0,0.8); */
	padding-bottom: 10px;
	transition: 0.3s;
/*	overflow-y: hidden;*/
}

#mokujiMain li{
	border-bottom: 1px solid rgba( 255, 255, 255, 0.1 );
	padding: 4px;
}

/* Chrome, Safari 対応 */
/* #mokujiMain::-webkit-scrollbar {
	display:none;
}

#mokujiMain.active{
	top:0;
} */

#viewWrap {
		position: absolute;
		display: block;
		background-color:var(--bgColor);
}

#printer {
	display: none;
}

#scrollBar {
		display : none;
		margin-top : 3.0vh;
		margin-bottom : 3.0vh;
		border-radius: 0.8vw;
		width : 80vh;
}

.load {
	display:block;
	height:70px;
	width: 70px;
	animation: loading 3s linear infinite;
	will-change: transform;
}
.load .loading-inner {
	stroke-dashoffset: 0;
	stroke-dasharray: 300;
	stroke-width: 10;
	stroke-miterlimit: 10;
	stroke-linecap: round;
	animation: loading-circle 1s linear infinite;
	stroke: var(--loadColor);
	fill: transparent;
	will-change: stroke-dashoffset;
}

@keyframes loading {
	0% {
	 transform: rotate(0);
	}
	100% {
	 transform: rotate(360deg);
	}
}
@keyframes loading-circle {
	0% {
	 stroke-dashoffset: 0;
	}
	100% {
	 stroke-dashoffset: -600;
	}
}

.slider {
		display: flex;
		width: max-content;
		transition: transform 0.3s ease;
}

#controller {
		display: block;
		position: fixed;
		top: 0;
		left:0;
		width: 100%;
		height: 100%;
		z-index: 10;
}

.zoomed {
	transition: transform 0.3s ease;
	transform-origin: 0 0;
	position: absolute;
	z-index:6;
	cursor: grab; /* ドラッグ用のカーソルスタイル */
}

#modal{
	display: none;
}

#loader_wrap {
	z-index: 98;
	margin: 0;
	display:none;
	position: absolute;
	background-color: var(--bgColor);
	top: 50%;
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%, -50%) ;
	padding:0.3vw;
}

#item_navi{
	display: block;
	position: relative;
	z-index: 11;
	background-color:var(--wrapColor);
}
#background_m{
	z-index: 97;
	display: block;
	position: fixed;
	left: 0;
	top: 0;
	width:100%;
	height:100%;
	background-color: rgba(0,0,0,0.6);
}

/* #rangeArea{
	display: flex;
	justify-content: center;
	align-items: center;
	height: calc( 72vh - 60px );
	background-color: rgba(0,0,0,0.5);
	border-radius: 2vw 0 0 2vw;
	width: 100%;
} */

#rangeArea{
	display: flex;
	justify-content: center;
	align-items: center;
	/* height: calc( 72vh - 60px ); */
	/* background-color: rgba(0,0,0,0.5); */
	border-radius: 2vw 0 0 2vw;
	width: 100%;
}

#scrollBar {
	-webkit-appearance: none;
	appearance: none;
	outline: none;
	cursor: pointer;
	/* width: calc( 68vh - 66px ); */
	width: 90%;
	height: 6px;
	transform-origin: center;
	transform: rotate(180deg);
}
 
/* Thumb: Chrome, Safari, Opera, Edge Chromium */
#scrollBar::-webkit-slider-thumb {
	z-index:31;
	-webkit-appearance: none;
	appearance: none;
	height: 24px;
	width: 24px;
	background-color: #fff;
	border-radius: 50%;
}
 
/* Thumb: Firefox */
#scrollBar::-moz-range-thumb {
	z-index:31;
	border: none;
	height: 24px;
	width: 24px;
	background-color: #fff;
	border-radius: 50%;
}

#mainSlider{
	background-color: var(--wrapColor);
	-webkit-transform-origin: left top;
	-moz-transform-origin: left top;
	-ms-transform-origin: left top;
	-o-transform-origin: left top;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

#btnBack{
	width : 10vw;
	display: flex;
	align-items: center;
	justify-content: center;
}

#btnVertical{
	width : 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom:20px;
}

#vertical{
	fill:#fff;
}

#backBtn{
	fill:#fff;
}

#settingBtn{
}

.iconBtn{
	background-color : rgba( 0, 0, 0, 0.8 );
	height:40px;
	width:40px;
	margin:10px;
	border-radius:100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.settingsIcon{
	fill:#fff;
}

div.sukasi{
	display:block;
	position:fixed;
	filter:alpha(opacity=1);
	-moz-opacity:0.03;
	opacity:0.075;
	z-index:1002;
}


 .tap-icon {
	position: absolute;
	display:block;
	width: 8px;
	height: 8px;
	padding: 4px;
	background-color: rgb(224,224,224);
	border-radius: 50%;
	cursor: pointer;
	opacity: 1;
	z-index:30;
}

#modalWrap{
	z-index:9;
	position: fixed;
	top:0;
	left:0;
	justify-content: center;
	align-items: center;
	height:100vh;
	width:100vw;
	display : flex;
}

#modalMainWrap{
	position: absolute;
	display: block;
	padding: 16px 20px;
	text-align:center;
	background-color: white;
	border-radius: 10px;
	color: #444444;
	max-width: 66vw;
	background-color:rgba(0,0,0,0.8);
	opacity: 1;
	overflow:hidden;
	animation-name: fadeOut;
	animation-duration: 1.4s;
	animation-fill-mode: forwards;
}

#modalMainWrapIcon{
	display:block;
	position: relative;
	animation-name: fadeIn;
	animation-duration: 0.6s;
	animation-fill-mode: forwards;
}

/* フェードインアニメーション */
@keyframes fadeIn {
		0% {
			top:-50px;
		}
		100% {
			top:0;
		}
}

/* フェードインアニメーション */
@keyframes fadeOut {
		0% {
		}
		75% {
				opacity: 1;
		}
		100% {
				opacity: 0;
		}
}

#autoSpeedSetting{
	z-index:25;
	display: flex;
	align-items: center;
	justify-content: center;
	position:fixed;
	display: none;
	background-color: rgba(0,0,0,0.8);
	border-radius: 20px;
	transform: translateY(-50%);
}

#speedBar{
	width : 140px;
	margin : 10px 20px;
}

.zoomIcon{
	/* padding:16px; */
	display:flex;
	align-items: center;
	/* background-color: rgba(0,0,0,0.8); */
	/* border-radius:0 8px 8px 0; */
	justify-content: center;
}

.zoomIcon:first-child{
	/* border-radius:8px 0 0 8px; */
	border-right: 1px solid #747474;
}

.cursorPointer{
	cursor:pointer;
}

.cursorPointer:hover{
	background-color: rgba(255,255,255,0.2);
	border-radius: 4px;
}

#toggleArrow {
	display: flex;
	align-items: center;
	justify-content: center;

	transition: 0.3s;
}

#toggleArrow.active{
	transform: rotate(180deg);
}

.fullScreenLight{
	background-color:#fff;
}

.fullScreenDark{
	background-color:#111;
}

@media print {
	#viewWrap,#menuWrap,.loadingBox,.curtain{
		display: none;
	}
	#printer {
		display: block;
	}
}

@media screen and (min-width:600px){
	#mainMenu{
		padding: 16px 16px 48px 16px;
	}
	#footerMenu{
		padding: 16px 16px 12px 16px;
	}
	#footerMenu span{
		width:calc(100vw - 96px);
	}
	#headerRight{
		padding-right : 16px;
	}
}

#download{
	display:none;
}

#print{
	display:none;
}

#cfgModal{
	display:none;
	position: fixed;
	z-index:25;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: rgba(0,0,0,0.7);
	backdrop-filter: blur(20px);
	color: #fff;
	border-radius: 10px;
	width: 80vw;
	max-width: 420px;
	color: #fff;
	line-height: 40px;
	height:400px;
	padding: 10px 30px;
}

.cfgModalTitle{
	width:100%;
	text-align: center;
}

#cfgModalHelp{
	display: flex;
	position: absolute;
	justify-content: flex-end;
	align-items: center;
	width: auto;
	top:10px;
	right:30px;
	font-size: smaller;
	cursor: pointer;
}


#cfgModalBottom{
	display: block;
	position: fixed;
	bottom: 0;
	border-top: 1px solid rgba( 255, 255, 255, 0.1 );
	left: 0;
	line-height: 48px;
	width: 100%;
	z-index: 21;
	font-size: smaller;
	text-align: center;
	border-radius:0 0 10px 10px;
}

.cfgModalBlock{
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid rgba( 255, 255, 255, 0.1 );
	z-index: 22;
	font-size: smaller;
	align-items: center;
}
ul{
	list-style: none;
    margin: 0;
    padding: 0;
}

.cfgSelectMain {
    box-sizing: border-box;
	display: flex;
	justify-content: flex-end;
    padding: 0;
	width: 100px;
	padding:6px;
	align-items: center;
	line-height: 24px;
}

.cfgSelectBox {
	width: 100px;
	z-index: 22;
	/* display: block; */
	display: none;
	position: absolute;
}

.cfgSelectBox li {
    cursor: default;
	padding:6px;
	line-height: 24px;
	background-color: #333;
}

.cfgSelectBox li:hover{
	background-color: #666;
}

.back_btn {
	z-index: 11;
	border: 1px solid #81af1c!important;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	background: #81c31f;
	background: -moz-linear-gradient(top,#81c31f 0,#81af1c 100%);
	background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#81c31f),color-stop(100%,#81af1c));
	background: -webkit-linear-gradient(top,#81c31f 0,#81af1c 100%);
	background: -o-linear-gradient(top,#81c31f 0,#81af1c 100%);
	background: -ms-linear-gradient(top,#81c31f 0,#81af1c 100%);
	background: linear-gradient(to bottom,#81c31f 0,#81af1c 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#81c31f', endColorstr='#81af1c', GradientType=0 );

	color: #fff!important;
	cursor: pointer;
	font-size: 120%;
	font-weight: bold;
	height: 45px;
	line-height: 45px;
	margin: 10px auto;
	position: relative;
	text-align: center;
	width: 80%;
}
.back_btn:after {
    content: "";
    position: absolute;
    right: 15px;
    top: 50%;
    display: block;
    width: 5px;
    height: 5px;
    margin-top: -5px;
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    z-index: 10;
}

#mokujiIcon{
	margin-left: 4px;
}

#mokujiModalBottom{
	display: flex;
	justify-content: center;
	align-items: center;
}

#liketate{
	display: none;
}

.js-popupshare-viewer{
	display: none;
}